<template>
  <view class="page">
    <!--		搜索栏-->
    <view class="search-input">
      <view class="input-container">
        <image class="icon" :src="searchIcon"></image>
        <input type="text" v-model="searchForm.school_name" placeholder="输入院校名称进行搜索" />
      </view>
      <view class="btn" @click="refreshPaginationGetList">搜索</view>
    </view>
    <!--		按条件筛选-->
    <view class="filter-bar">
      <view class="item" @click="$refs.collegeLocationSelector.open()">
        <template v-if="searchForm.provinceNames.length === 0">
          <view class="text">院校位置</view>
          <image class="icon" :src="bottomArrowIcon"></image>
        </template>
        <template v-else>
          <view class="text active">
            <block v-for="(item, index) in searchForm.provinceNames" :key="item">
              <text>{{ item }}</text>
              <text v-if="index !== searchForm.provinceNames.length - 1">,</text>
            </block>
          </view>
          <image class="icon" :src="downArrowActiveIcon"></image>
        </template>
      </view>
      <collegeLocationSelector
        ref="collegeLocationSelector"
        :province-names.sync="searchForm.provinceNames"
        :province_area.sync="searchForm.province_area"
        @change="refreshPaginationGetList"
      ></collegeLocationSelector>

      <view class="item" @click="$refs.collegeTypeSelector.open()">
        <template
          v-if="
            searchForm.is_985 === 0 &&
            searchForm.is_211 === 0 &&
            searchForm.is_zihuaxian === 0 &&
            searchForm.syl === 0 &&
            searchForm.typeSchoolNames.length === 0
          "
        >
          <view class="text">院校特色</view>
          <image class="icon" :src="bottomArrowIcon"></image>
        </template>
        <template v-else>
          <view class="text active">
            <block v-if="searchForm.is_985 === 1">
              <text>985,</text>
            </block>
            <block v-if="searchForm.is_211 === 1">
              <text>211,</text>
            </block>
            <block v-if="searchForm.syl === 1">
              <text>双一流,</text>
            </block>
            <block v-if="searchForm.is_zihuaxian === 1">
              <text>自划线,</text>
            </block>
            <block v-if="searchForm.typeSchoolNames.length > 0">
              <text v-for="(item, index) in searchForm.typeSchoolNames" :key="item">
                {{ item }}
                <text v-if="index !== searchForm.typeSchoolNames.length - 1">,</text>
              </text>
            </block>
          </view>
          <image class="icon" :src="downArrowActiveIcon"></image>
        </template>
      </view>
      <collegeTypeSelector
        ref="collegeTypeSelector"
        :is_211.sync="searchForm.is_211"
        :is_985.sync="searchForm.is_985"
        :syl.sync="searchForm.syl"
        :is_zihuaxian.sync="searchForm.is_zihuaxian"
        :typeSchoolNames.sync="searchForm.typeSchoolNames"
        @confirm="refreshPaginationGetList"
      ></collegeTypeSelector>

      <view class="item" @click="$refs.collegeClassifySelector.open(searchForm.typeNames)">
        <template v-if="searchForm.typeNames.length === 0">
          <view class="text">院校类型</view>
          <image class="icon" :src="bottomArrowIcon"></image>
        </template>
        <template v-else>
          <view class="text active">
            <block v-for="(item, index) in searchForm.typeNames" :key="item">
              <text>{{ item }}</text>
              <text v-if="index !== searchForm.typeNames.length - 1">,</text>
            </block>
          </view>
          <image class="icon" :src="downArrowActiveIcon"></image>
        </template>
      </view>
      <collegeClassifySelector
        ref="collegeClassifySelector"
        @confirm="
          (value) => {
            searchForm.typeNames = value
            refreshPaginationGetList()
          }
        "
      ></collegeClassifySelector>
    </view>
    <!--		学校数量-->
    <view class="school-count">
      <text>院校（{{ total }}所）</text>
    </view>
    <!--		学校列表-->
    <view class="school-list" v-if="schoolList.length > 0">
      <view
        class="item"
        v-for="item in schoolList"
        :key="item.school_id"
        @click="
          () => {
            $uni.navigateTo({
              url: handleUrlParams('/markingCampaign/pages/kaoYanSection/detail/index', item),
            })
          }
        "
      >
        <!--				学校logo-->
        <image class="icon" :src="getShowNginxPicUrl('kaoYan_college_logo/' + item.logoUrl)"></image>
        <view class="right">
          <view class="header">
            <!--					学校名称-->
            <view class="school-name">
              <text>{{ item.school_name }}</text>
              <!--              <image class="hot-icon" :src="fireIcon" v-if="item.is_ads === 1"></image>-->
            </view>
            <!--						学校位置-->
            <view class="location">
              <image class="icon" :src="locationIcon"></image>
              <text>{{ item.province_name }}</text>
            </view>
          </view>
          <view class="school-name-type">
            <!--						院校名称-->
            <text>{{ item.type_school_name }}</text>
            <text style="margin: 0 10rpx">|</text>
            <!--						院校类型-->
            <text>{{ item.type_name }}</text>
          </view>
          <!--					标签列表-->
          <view class="label-list">
            <!--						985-->
            <view class="item" v-if="item.is_985 === 1">985</view>
            <!--						211-->
            <view class="item" v-if="item.is_211 === 1">211</view>
            <!--						双一流-->
            <view class="item" v-if="item.syl === 1">双一流</view>
            <!--						自划线-->
            <view class="item" v-if="item.is_zihuaxian === 1">自划线</view>
          </view>
        </view>
      </view>
      <uni-load-more :status="loadMoreStatusText"></uni-load-more>
    </view>
    <empty v-else height="1000rpx"></empty>
  </view>
</template>

<script>
import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
import searchIcon from "./assets/search.svg"
import bottomArrowIcon from "./assets/bottomArrow.svg"
import request from "@/utils/request"
import { getShowImage, handleUrlParams } from "@/utils"
import fireIcon from "./assets/fire.svg"
import locationIcon from "./assets/location.svg"
import { getShowNginxPicUrl } from "@/utils/settings"
import collegeLocationSelector from "./components/collegeLocationSelector.vue"
import downArrowActiveIcon from "./assets/downArrowActive.svg"
import empty from "@/components/empty.vue"
import collegeTypeSelector from "./components/collegeTypeSelector.vue"
import collegeClassifySelector from "./components/collegeClassifySelector.vue"

export default {
  data() {
    return {
      schoolList: [],
      searchForm: {
        provinceNames: [], // 位置
        province_area: "", // A区B区
        typeNames: [], // 院校类型
        is_985: 0, // 是否985 1-是，2-否
        is_211: 0, // 是否211 1-是，2-否
        is_zihuaxian: 0, // 是否自划线 1-是，2-否
        syl: 0, // 是否双一流 1-是，2-否
        typeSchoolNames: [], // 高等院校，科研院所
        school_name: "", // 学校名称
      },
      pagination: {
        current: 1,
        size: 10,
      },
      total: 0,
      searchIcon,
      bottomArrowIcon,
      fireIcon,
      locationIcon,
      downArrowActiveIcon,
      loadMoreStatusText: "more",
    }
  },
  components: { uniLoadMore, collegeLocationSelector, empty, collegeTypeSelector, collegeClassifySelector },
  onLoad() {
    this.refreshPaginationGetList()
  },
  methods: {
    handleUrlParams,
    getShowNginxPicUrl,
    getShowImage,
    async getSchoolList() {
      if (this.loadMoreStatusText === "loading") return
      this.loadMoreStatusText = "loading"
      const data = await request({
        url: "university/getUniversityPage",
        data: {
          ...this.searchForm,
          ...this.pagination,
        },
        errorHandle: true,
      })
      this.schoolList = this.schoolList.concat(data.data)
      this.total = data.total
      if (this.schoolList.length >= data.total) {
        this.loadMoreStatusText = "noMore"
      } else {
        this.loadMoreStatusText = "more"
      }
    },
    async refreshPaginationGetList() {
      this.pagination.current = 1
      this.schoolList = []
      this.loadMoreStatusText = "more"
      await this.getSchoolList()
    },
  },
  onReachBottom() {
    this.pagination.current++
    this.getSchoolList()
  },
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: var(--theme-color-light);
  //background: var(--gray-background-color);
  > .search-input {
    padding: 30rpx;
    display: flex;
    align-items: center;
    > .input-container {
      width: 0;
      flex: 1;
      border: 2rpx solid var(--theme-color);
      padding: 10rpx 20rpx;
      font-size: 28rpx;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      > .icon {
        margin-right: 20rpx;
        width: 28rpx;
        height: 28rpx;
      }
      > input {
        width: 100%;
      }
    }
    > .btn {
      margin-left: 20rpx;
      font-size: 28rpx;
      color: white;
      padding: 10rpx 20rpx;
      background: var(--theme-color);
      border-radius: 29rpx;
    }
  }
  > .filter-bar {
    padding: {
      bottom: 30rpx;
    }
    display: flex;
    > .item {
      width: 0;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      > .icon {
        min-width: 20rpx;
        width: 20rpx;
        height: 20rpx;
        margin-left: 10rpx;
      }
      > .text {
        // 文本溢出加省略号
        font-size: 30rpx;
        color: var(--text-color-light);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &.active {
          color: var(--text-color-theme);
        }
      }
    }
  }
  > .school-count {
    padding: 0 30rpx;
    font-size: 28rpx;
    color: var(--text-color-light);
  }
  > .school-list {
    padding: {
      top: 20rpx;
      left: 20rpx;
      right: 20rpx;
    }
    > .item {
      margin-top: 20rpx;
      background: white;
      display: flex;
      align-items: center;
      border-radius: 20rpx;
      padding: 30rpx;
      border: 2rpx solid var(--theme-color);
      > .icon {
        width: 110rpx;
        height: 110rpx;
      }
      > .right {
        margin-left: 30rpx;
        width: 0;
        flex: 1;
        > .header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          > .school-name {
						width: 0;
						flex: 1;
            font-size: 32rpx;
            display: flex;
            align-items: center;
            font-weight: bold;
            > .hot-icon {
              width: 26rpx;
              height: 26rpx;
              margin-left: 10rpx;
            }
          }
          > .location {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            color: var(--text-color-light);
            > .icon {
              width: 20rpx;
              height: 20rpx;
              margin-right: 10rpx;
            }
          }
        }
        > .school-name-type {
          margin-top: 10rpx;
          font-size: 28rpx;
          color: var(--text-color-lighter);
        }
        > .label-list {
          margin-top: 10rpx;
          display: flex;
          > .item {
            border: 2rpx solid var(--text-color-theme);
            font-size: 26rpx;
            color: var(--text-color-theme);
            padding: 5rpx 10rpx;
            border-radius: 10rpx;
            margin-right: 10rpx;
          }
        }
      }
    }
  }
}
</style>
